<template>
  <transition name="container" appear>
    <div v-if="visible" @click.stop="" class="leftmenu-box gs-filter" @contextmenu.stop="">
      <p class="time-t text-center">{{timeDate}}</p>

    </div>
  </transition>
</template>

<script>
import { ref,onMounted } from 'vue'
export default {
  name: 'LeftMenu',
  components: {},
  props: {
    visible:{
      type:Boolean,
      default:false
    },
    timeDate:{
      type:String,
      default:''
    }
  },
  emits: [],
  setup(props) {
    let time = ref('')
    function getTime(){
      const date = new Date()
      const hour = date.getHours()<10 ? '0'+ date.getHours() : date.getHours()
      const minutes = date.getMinutes()<10 ? '0'+date.getMinutes() : date.getMinutes()
      time.value = hour + ':' + minutes
    }
    onMounted(() => {
      // setInterval(() => {
      //   getTime()
      // }, 1000);
    })
    return {
      time
    }
  }
} 

</script>
<style lang='scss' scoped>
@keyframes translateAnimationShow {
    from 
    {
      left: -100%;
      opacity: 0;
      backdrop-filter: blur(0px);
    }
    to 
    {
      left: 10px;
      opacity: 1;
      backdrop-filter: blur(30px);
    }
}
  
@keyframes translateAnimationHide {
    from 
    {
      // left: 10px;
      opacity: 1;
      // backdrop-filter: blur(30px);
    }
    to 
    {
      left: -100%;
      opacity: 0;
      // backdrop-filter: blur(0px);
    }
}
.leftmenu-box {
  z-index: 9996;
  width: 600px;
  height: calc(100% - 20px);
  position: absolute;
  left: 10px;
  bottom: 10px;
  border-radius: 10px;
  padding: 20px;

  .time-t {
    font-size: 24px;
  }

}

.container-enter-from,
.container-enter-active,
.container-enter-to {
  animation-name: translateAnimationShow;
  animation-duration: .7s;
  animation-fill-mode: forwards;
}

.container-leave-from
.container-leave-active,
.container-leave-to {
  animation-name: translateAnimationHide;
  animation-duration: .7s;
  animation-fill-mode: forwards;
}

</style>
